<template>
    <div >
        <div class="warp" :style="{overflow: isShow,height:height}">
           
            <div ref="content" class="content" :style="{color:fontColor}"><slot></slot>{{content}}</div>
        </div>
        
        <el-button class="btn" v-if="show" type="text" @click="btn">{{showAll?'收起':'显示全部'}}</el-button>
        <div class="clear"></div>
    </div>
</template>

<script>
import resizeObserver from 'element-resize-detector'
const observer = resizeObserver()
    export default {
        props:{
            content: String,
            row:{
                type:Number,
                default:2
            },
            lineHeight:{
                type:Number,
                default:30
            },
            fontColor:{
                type:String,
                default:'#808080'
            }
        },
        data(){
            return {
                showAll:false,
                show:false,
            }
        },
        computed:{
            isShow(){
                    return  this.showAll?'auto':'hidden'
            },
            height(){
                   return  this.showAll?'auto':`${this.row*this.lineHeight}px`
            }
        },
          mounted () {
    // 监听尺寸变化
    observer.listenTo(this.$refs.content, ele=> {
        const height = ele.clientHeight;
        if(height>this.row*this.lineHeight){
            this.show = true;
        }else{
            this.show = false;
        }
    })
  },
        methods:{
            btn(){
                this.showAll = !this.showAll
            }
        }
    }
</script>

<style lang="scss" scoped>
.warp{
    width: 100%;
    height:60px;
    
}
.btn{
    float:right;
}
.clear{
    clear:both
}
.content{
font-size:16px;
line-height:30px
}
</style>